<template>
  <view class="padding-bottom">
    <view class="box">
      <view v-for="(item, index) in serviceList" :key="index" class="list" @click="goDetail(item.packageId)">
        <img v-if="item.shareImg" class="pro-img" :src="item.shareImg" />
        <img v-else class="pro-img" :src="test" />
        <view class="name">{{ item.title }}</view>
        <view class="tips">
          <!-- <span v-for="(desc, descIndex) in item.products" :key="descIndex" class="spanMar">
            {{ desc.productName }}
          </span> -->
          <span>{{ item.subTitle }}</span>
        </view>
        <view class="price">
          <span class="red size44rpx">{{ item.minSalePrice }}</span> 元/年起
          <span class="age">{{ item.ageRange[0] }}-{{ item.ageRange[1] }}岁</span>
        </view>
        <img class="rightIcon" :src="require('./../images/icons/right.png')" />
      </view>
    </view>
    <view v-if="loadDone && serviceList.length < 1" class="zwsj"> </view>
  </view>
</template>

<script>
import { getServerPackSix, getCurrentUserInfo } from '@/api/join.js';
import testIcon from './../images/warning.png';
import { tongji } from '@/utils/tools';
export default {
  data() {
    return {
      patientId: '',
      test: testIcon,
      serviceList: [],
      loadDone: false,
      currentUserInfo: {}
    };
  },

  onLoad: function (option) {
    console.log('onLoad option:', option);
    if (option && option.patientId) {
      this.patientId = option.patientId;
    } else {
      // this.patientId = 'f6dab639ff554ef39927d22589df7536';
      // this.optionRelation = Number(2) || '';
    }
    console.log('onLoad option:', option);
    this.getServerList();

    if (wx.getStorageSync('token')) {
      getCurrentUserInfo().then((res) => {
        if (res.code === 0) {
          this.currentUserInfo = res.data;
        } else {
          this.$message({
            type: 'error',
            message: '获取当前用户信息失败'
          });
        }
      });
    }
  },
  onShow() {
    console.log('onSHow');
  },
  methods: {
    // 需求2671，只需要分享给朋友
    onShareAppMessage: function (e) {
      let title = '万户健康——家庭健康整体解决方案';
      return {
        title: title,
        path: '/pagesC/service/index?cid=' + this.currentUserInfo.cid,
        imageUrl:
          'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zzjj.png'
      };
    },
    async getServerList() {
      console.log('getServerList');
      const { data } = await getServerPackSix(2);
      this.loadDone = true;
      this.serviceList = data;
    },
    goDetail(id) {
      this.$store.commit('join/SET_COMMUNITYSERVICEID', id);
      this.$wxPromise.navigateTo({
        url: `/pagesC/service/detail?id=${id}`
      });
      tongji('f46ebcb3-cda9-4696-baf7-82e637999d8c');
      tongji('f16c4685-dcb1-4ed5-a319-251adaf63ef3', { id });
    }
  }
};
</script>

<style lang="scss">
@import './../style/common.scss';
.box {
  background-color: #fff;
  .list {
    padding: 24rpx 0;
    margin: 0 24rpx;
    padding-left: 190rpx;
    position: relative;
    min-height: 180rpx;
    border-bottom: 2rpx solid #e8e8e8;
    .pro-img {
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      left: 0;
      top: 28rpx;
    }
    .name {
      font-size: 36rpx;
      font-weight: bold;
    }
    .tips {
      font-size: 24rpx;
      color: #9a9a9a;
      .spanMar {
        display: inline-block;
        padding: 0 8rpx 0 0;
        height: 30rpx;
        line-height: 30rpx;
        margin: 4rpx;
        position: relative;
        border-right: 2rpx solid #eee;
      }
      .spanMar:last-child {
        border: none;
      }
    }
    .price {
      color: #9a9a9a;
      padding: 10rpx 0 0 0;
      font-size: 24rpx;
      .red {
        color: #c8161d;
        font-weight: bold;
        font-size: 44rpx;
        padding-right: 10rpx;
      }
      .age {
        color: #666;
        display: inline-block;
        background-color: #f9f9f9;
        margin-left: 10rpx;
        padding: 0 6rpx;
      }
    }
    .rightIcon {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -20rpx;
    }
  }
  .list:last-child {
    border: none;
  }
}
.noData {
  padding: 40rpx;
  text-align: center;
  color: #999;
}
</style>
